<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入样式-->
    <link href="../imgs/2.jpeg" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <!-- 引入js-->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/http.js"></script>
    <script src="../js/element-ui/index.js"></script>
    <style>
        body{
            background: #f2f6fc;
        }
        .el-table .warning-row {
            background: oldlace;
        }
        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-table .blue-row {
            background: skyblue;
        }
    </style>
</head>
<body>
<div id="app">
    <el-input v-model="queryString" placeholder="请输入书名或昵称" style="width:250px;margin-top:10px"></el-input>
    <el-button icon="el-icon-search" circle @click="initTableData"></el-button>
    <el-button type="primary" @click="openDialog">添加书评</el-button>
    <el-table
            :data="tableData" style="width: 100%;margin-top: 10px"
            :row-class-name="tableRowClassName">
        <el-table-column prop="bookName" label="书名"></el-table-column>
        <el-table-column prop="score" label="评分"></el-table-column>
        <el-table-column prop="review" label="评论"></el-table-column>
        <el-table-column prop="nickName" label="昵称"></el-table-column>
        <el-table-column prop="time" label="发布时间"></el-table-column>
        <el-table-column fixed="right" label="订阅">
            <template slot-scope="scope">
                <el-button v-if="scope.row.isSubscribe=='false'" type="primary"  size="mini" @click="subscribe(scope.row.userId,true)">确认</el-button>
                <el-button v-if="scope.row.isSubscribe=='true'" type="success"  size="mini" @click="subscribe(scope.row.userId,false)">取消</el-button>
                <el-button v-if="scope.row.isSubscribe=='wo'" type="danger"  size="mini" @click="warn()">禁止</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            align="center" style="margin-top: 10px"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.page"
            :page-size="pagination.pageSize"
            layout="total,prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <el-dialog
            title="添加书评"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="formData" label-width="80px">
            <el-form-item label="书名">
                <el-input v-model="formData.bookName" placeholder="请输入书名"></el-input>
            </el-form-item>
            <el-form-item label="评分">
                <el-rate
                        style="margin-top: 10px"
                        v-model="formData.score"
                        :texts=texts
                        show-text>
                </el-rate>
            </el-form-item>
            <el-form-item label="评论">
                <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入书评"
                        v-model="formData.review">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    let vue=new Vue({
        el:"#app",
        data:{
            tableData:[],
            texts:['极差','失望','一般','满意','惊喜'],
            formData:{bookName:"",score:-1,review:""},
            queryString:"",
            dialogVisible:false,
            pagination:{page:1,pageSize:5,total:0},
        },
        created(){
            this.initTableData();
        },
        methods:{
            initTableData(){
                http.get("/bookReview?page="+this.pagination.page+"&pageSize="
                    +this.pagination.pageSize+"&queryString="+this.queryString).then(res=>{
                    this.pagination.total=res.data.total;
                    this.tableData=res.data.rows;
                });
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex%4==1) {
                    return 'warning-row';
                } else if (rowIndex%4==3) {
                    return 'success-row';
                }
                return '';
            },
            openDialog(){
                this.formData={bookName:"",score:-1,review:""};
                this.dialogVisible=true;
            },
            handleCurrentChange(currentPage){
                this.pagination.page=currentPage;
                this.initTableData();
            },
            add(){
                let param=this.formData;
                if (param.bookName==""||param.score==-1||param.review==""){
                    this.$message.error("输入内容缺失");
                    return;
                }
                http.post("/bookReview",param).then(res=>{
                    this.$message.success(res.message);
                    this.dialogVisible=false;
                    this.initTableData();
                });
            },
            subscribe(userId,isSubscribe){
                if (isSubscribe){
                    http.post("/subscribe/"+userId).then(res=>{
                        this.$message.success(res.message);
                        this.initTableData();
                    });
                }else {
                    http.delete("/subscribe/"+userId).then(res=>{
                        this.$message.success(res.message);
                        this.initTableData();
                    });
                }
            },
            warn(){
                this.$message.error("你不可订阅你自己");
            }
        }
    });
</script>
</body>
</html>